அடுத்தது

Angular Interpolation

{{ ... }} உடன் கூறு மதிப்புகளைக் காட்டுதல்

இடைச்செருகல் என்றால் என்ன?

இரட்டை சுருள் அடைப்புக்குறிகளுடன் கூறு மதிப்புகளை DOM இல் காட்டுகிறது.

இதை இப்படிப் படியுங்கள்: "இந்த மதிப்பை எடுத்து உரையாக அச்சிடு".

ஒரு-வழி மட்டுமே: தரவு → காட்சி.

1

கூறு தரவு

TypeScript பண்புகள்

2

இடைச்செருகல்

{{ expression }}

3

DOM காட்சி

HTML உரை வெளியீடு

எப்போது இடைச்செருகலைப் பயன்படுத்துவது

உரை மதிப்புகளைக் காட்ட

எளிய, வேகமான வெளிப்பாடுகள் (பக்க விளைவுகள் இல்லை)

{{ name }}

பண்பு பைண்டிங்

டைனமிக் அட்ரிபியூட்டுகளுக்குப் பயன்படுத்தவும்

[src]="imageUrl"

HTML உள்ளடக்கம்

[innerHTML] ஐ கவனத்துடன் கருதுங்கள்

[innerHTML]="safeHTML"

தொடரியல்:

{{ expression }}: கூறுக்கு எதிராக மதிப்பீடு செய்து முடிவை உரையாக செருகுகிறது (HTML-தப்ப வைக்கப்பட்டது).

எடுத்துக்காட்டு

கூறு மதிப்புகளை DOM இல் காட்ட இடைச்செருகலைப் பயன்படுத்தவும்:

எடுத்துக்காட்டு:

உங்கள் சொந்த Angular சேவையகத்தைப் பெறுங்கள்

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    
{{ title }}

    
Hello {{ name }}!

    
2 + 3 = {{ 2 + 3 }}

    
Upper: {{ name.toUpperCase() }}

  `
})
export class App {
  title = 'Templates & Interpolation';
  name = 'Angular';
}

bootstrapApplication(App);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Angular App</title>
</head>
<body>
  <app-root></app-root>
</body>
</html>

முடிவு காட்சி:

Templates & Interpolation

Hello Angular!

2 + 3 = 5

Upper: ANGULAR

எடுத்துக்காட்டு விளக்கம்

பண்பு மதிப்புகள்

கூறு புலங்களைப் படிக்கிறது

{{ title }}
{{ name }}

கணித வெளிப்பாடுகள்

கணித செயல்பாடுகளை மதிப்பிடுகிறது

{{ 2 + 3 }}
{{ price * quantity }}

முறை அழைப்புகள்

சரம் மதிப்பில் முறையை அழைக்கிறது

{{ name.toUpperCase() }}
{{ getFullName() }}

பண்பு அணுகல்

ஒருங்கிணைந்த பொருள்களின் பண்புகளை அணுகுகிறது

{{ user.name }}
{{ items.length }}

முக்கிய குறிப்புகள்:

  • உரை vs HTML: இடைச்செருகல் HTML ஐத் தப்ப வைக்கிறது. HTML ஐ ரெண்டர் செய்ய, கவனத்துடன் [innerHTML] உடன் பைண்ட் செய்யவும்.
  • வெளிப்பாடுகளை இலகுவாக வைத்திருங்கள்: {{ ... }} இல் கனரக வேலையைத் தவிர்க்கவும்; கூறில் மதிப்புகளைக் கணக்கிடுங்கள்.
  • பக்க விளைவுகள் இல்லை: டெம்ப்ளேட் வெளிப்பாடுகளுக்குள் நிலையை மாற்ற வேண்டாம். அவற்றை தூய்மையாக வைத்திருங்கள்.

பாதுகாப்பு குறிப்பு:

இடைச்செருகல் HTML ஐ தானாகவே தப்ப வைக்கிறது, இது XSS (குறுக்கு-தள ஸ்கிரிப்டிங்) தாக்குதல்களிலிருந்து உங்கள் பயன்பாட்டைப் பாதுகாக்கிறது. HTML உள்ளடக்கத்தை சேர்க்க வேண்டியிருந்தால், கவனமாக [innerHTML] ஐப் பயன்படுத்தி, முதலில் உள்ளடக்கத்தை சுத்தப்படுத்துங்கள்.

பயிற்சி

உங்கள் அறிவைச் சோதிக்க இந்தப் பயிற்சியை முயற்சிக்கவும்:

❓கூறு பண்பை டெம்ப்ளேட்டில் ரெண்டர் செய்யும் தொடரியல் எது?

{{ }} (இடைச்செருகல்)
✓ சரி! {{ }} தொடரியல் கூறு பண்புகளை உரையாக DOM இல் காட்ட இடைச்செருகலைப் பயன்படுத்துகிறது.
[prop] (பண்பு பைண்டிங்)
✗ தவறானது! [prop] தொடரியல் HTML உறுப்பு பண்புகளை அமைக்கப் பயன்படுகிறது, உரை உள்ளடக்கத்தைக் காட்ட அல்ல.
(event) (நிகழ்வு பைண்டிங்)
✗ தவறானது! (event) தொடரியல் பயனர் நிகழ்வுகளைக் கையாளப் பயன்படுகிறது, கூறு தரவைக் காட்ட அல்ல.

பைண்டிங் வகைகள்:

Angular பல வகையான பைண்டிங்களை வழங்குகிறது: காட்சிக்கு தரவைக் காட்ட இடைச்செருகல் ({{ }}), உறுப்பு பண்புகளை அமைக்க பண்பு பைண்டிங் ([prop]), மற்றும் பயனர் செயல்களைக் கையாள நிகழ்வு பைண்டிங் ((event)). ஒவ்வொன்றும் வெவ்வேறு நோக்கங்களுக்காக உள்ளன.

அடுத்தது